	{{include file="../Common/header"}}
    <script>
        //出现购物车事件
        $(function(){
            $(document).scroll(function(){
                var t=$(document).scrollTop();
                if(t>1110){
                    $("#nav_bar").slideDown();
                }else{
                    $("#nav_bar").slideUp();
                }
            })
        })
    </script>
    <!-- 公共部分结束 -->
	<link rel="stylesheet" type="text/css" href="Public/Home/css/content.css">
<!--	<script src="./Public/Home/layer/layer.js"></script>-->
	<!-- 固定定位导航部分 -->
	<div id="nav_bar">
		<div class="nav">
			<div class="tab">
			<a href="#c1" title="">产品详情</a><span>/</span>
			<a href="#c2" title="">规格参数</a><span>/</span>
			<a href="#c3" title="">常见问题</a>
			</div>
			<div class="car">
				<a class="gInfoBtn" href="javascript:void(0);"> <span></span>加入购物车</a>
			</div>
		</div>
		
	</div>


	<div id="con">
		<div class="left">
		<div id="nav">
			<div id="menu_con">
				{{foreach from="$lData['picture']" value="$v"}}
		        <div class="tag" style="display:block">
		            <img class="imga" src="{{$v}}" alt="">
		         </div>
				{{endforeach}}
			</div>
			<ul>
				{{foreach from="$lData['picture']" value="$v"}}
				<li><img class="imgb" src="{{$v}}" alt="" style="width:63px;height:63px;"></li>
				{{endforeach}}
			</ul>
		</div>
		</div>
		<script>
            //商品图片hover切换效果
			var tabs=function(){
			    function tag(name,elem){
			        return (elem||document).getElementsByTagName(name);
			    }
			    //获得相应ID的元素
			    function id(name){
			        return document.getElementById(name);
			    }
			    function first(elem){
			        elem=elem.firstChild;
			        return elem&&elem.nodeType==1? elem:next(elem);
			    }
			    function next(elem){
			        do{
			            elem=elem.nextSibling;  
			        }while(
			            elem&&elem.nodeType!=1  
			        )
			        return elem;
			    }
			    return {
			        set:function(elemId,tabId){
			            var elem=tag("li",id(elemId));
			            var tabs=tag("div",id(tabId));
			            var listNum=elem.length;
			            var tabNum=tabs.length;
			            for(var i=0;i<listNum;i++){
			                    elem[i].onmouseover=(function(i){
			                        return function(){
			                            for(var j=0;j<tabNum;j++){
			                                if(i==j){
			                                    tabs[j].style.display="block";
			                                    //alert(elem[j].firstChild);
			                                    elem[j].firstChild.className="selected";
			                                }
			                                else{
			                                    tabs[j].style.display="none";
			                                    elem[j].firstChild.className="";
			                                }
			                            }
			                        }
			                    })(i)
			            }
			        }
			    }
			}();
			tabs.set("nav","menu_con");//执行
			</script>
		<div class="right">
			<div class="title">
				<strong id="name">{{$goodsData['gname']}}</strong>
				<p>{{$goodsData['des']}}</p>
			</div>
			<div class="money">
				<span>￥</span><strong id="price">{{$goodsData['price']}}</strong>
			</div>


            {{foreach from="$gaData" value="$v"}}
			<div class="cate clist">
				<span>{{$v['taname']}}：</span>
				<ul class="glist" id="glist">
                    {{foreach from="$v['value']" key="$kk" value="$vv"}}
					<a href="javascript:;" gaid="{{$kk}}">{{$vv}}</a>
                    {{endforeach}}
				</ul>
			</div>
            {{endforeach}}
			<script>
				//异步判断货品的选择
				$(function () {
					$('.clist a').click(function () {
						$(this).addClass('change').siblings().removeClass('change');
						//判断ul的个数，即共有多少中规格
						var ulLen=$('.clist ul').length;
						//获得选中元素的个数
						var changeLen=$('.change').length;
//						alert(changeLen);
						if(changeLen==ulLen){
							var str='';
							$(".gInfoBtn").html("加入购物车");
							//得到所有选中的属性id返回后台查看，是否存在库存以及附加价格
							$.each($('.change'),function () {
								str += $(this).attr('gaid')+',';
							});
							var This=$(this);
							$.ajax({
								type:'post',
								url:'{{U("select",['gid'=>$_GET['gid']])}}',
								data:{c:str},
								dataType:'json',
								success:function (e) {
									console.log(e);
									if(e.lstock){
										$('#stock').html("库存("+e.lstock+")件");
									}else{
										$('#stock').html("当前库存为0，请重新选择");
										This.removeClass('change');
//										layer.msg('当前库存为0啊！！');
									}
									$('#price').html(e.added);


								}
							})
						}
					})
				})
			</script>

			<div class="cate cate1">
				<span>数量：</span>
				<div class="gcIpt">
					<a class="downnum" href="javascript:void(0);">-</a>
					<input class="goodsNum" type="text" value="1">
					<a class="upnum" href="javascript:void(0);">+</a>
				</div>
				<span id="stock"></span>
			</div>
            <script>
                //商品数量变化
                $(function(){
                    $(".upnum").click(function(){
                        var t=  $(this).parent().find(".goodsNum"); //根据这个来找到它相对的元素
                        t.val(parseInt(t.val())+1);
                    });
                    $(".downnum").click(function(){
                        var t=  $(this).parent().find(".goodsNum"); //根据这个来找到它相对的元素
                        if(parseInt(t.val())==0){
                            return;
                        }
                        t.val(parseInt(t.val())-1);
                    });
                })
            </script>
			<div class="addCart">
				<a href="javascript:void(0);" class="gInfoBtn">加入购物车</a>
				<a href="javascript:void(0);" class="favorite">喜欢</a>
				<!-- <div style="clear:both"></div> -->
			</div>
			<script>
				//点击加入购物车
				$(function () {
					$(".gInfoBtn").click(function () {
						//判断未选择属性不能加入购物车
						var ulLen=$('.clist ul').length;
						//获得选中元素的个数
						var changeLen=$('.change').length;
						if(changeLen!=ulLen){
							$(this).html("请先选择商品规格");
						}else{
							//获得商品购买数量，商品价格，商品属性，商品名称
							var num=$(".goodsNum").val();
							var pri=$("#price").text();
							var attr='';
							$.each($('.change'),function () {
								attr += $(this).attr('gaid')+',';
							});
							var name=$("#name").text();
							var arr=[num,pri,attr,name];
							$.ajax({
								type:'post',
								url:'{{U("Cart/add",['gid'=>$_GET['gid']])}}',
								data:{c:arr},
								dataType:'json',
								success:function (e) {
									if(e==1){
										window.location.href="{{U('Cart/index')}}";
									}
								}
							})

						}
					})
				})
			</script>
			<div class="cate">
				<span class="span">保障</span>
				<ul class="guarantee">
					<li>360商城发货&amp;售后</li>
					<li>满99元包邮</li>
					<li>7天无理由退货</li>
					<li>15天免费换货</li>
				</ul>
			</div>
		</div>
	</div>



	<!-- 内容图片部分开始	 -->
	<br>
	<br>
	<br>
	<br>
	<br>
	<div id="tab_bar">
		<div class="tab">
			<a href="#c1" title="">产品详情</a><span>/</span>
			<a href="#c2" title="">规格参数</a><span>/</span>
			<a href="#C3" title="">常见问题</a>
		</div>
	</div>
	<div id="pic">
        <a name="c1"></a>
		<div class="full_pic" style="width:100%;overflow: hidden;">
		<div  style="margin: 0 auto;text-align: center;">
			{{$lData['content']}}
		</div>




<!--			<p style="height: 1350px; background-image: url(././Public/Home/images/content/c002.jpg);">				-->
<!--			</p>-->
<!--			<p style="height: 1503px; background-image: url(././Public/Home/images/content/c003.jpg);">				-->
<!--			</p>-->
<!--			<p style="height: 2232px; background-image: url(././Public/Home/images/content/c004.jpg);">				-->
<!--			</p>-->
<!--			<p style="height: 2339px; background-image: url(././Public/Home/images/content/c005.jpg);">				-->
<!--			</p>-->
<!--			<p style="height: 890px; background-image: url(././Public/Home/images/content/c006.jpg);">				-->
<!--			</p>-->
<!--			<p style="height: 1008px; background-image: url(././Public/Home/images/content/c007.jpg);">				-->
<!--			</p>-->
<!--			<p style="height: 1010px; background-image: url(././Public/Home/images/content/c008.jpg);">				-->
<!--			</p>-->
<!--			<p style="height: 1008px; background-image: url(././Public/Home/images/content/c009.jpg);">				-->
<!--			</p>-->
<!--			<p style="height: 307px; background-image: url(././Public/Home/images/content/c010.jpg);">				-->
<!--			</p>-->
			<p><br></p> 
		</div>
	</div>
	<div id="ggcs">
		<div class="ggcs">
            <a name="c2"><span>规格参数</span></a>
		</div>
	</div>
	<div id="ggmx">
		<div class="gCon">
			 <div class="gArg">
			 	
			 </div> 
			 <table cellpadding="0" cellspacing="0" class="col2">  
				 <tbody>
					 <tr> <td class="wd207">型号</td> <td>1501-M02</td>  </tr>
					 <tr> <td class="wd207">高度</td> <td>142mm</td>  </tr>
					 <tr> <td class="wd207">宽度</td> <td>70.1mm</td>  </tr>
					 <tr> <td class="wd207">厚度</td> <td>最薄处4.86mm</td>  </tr>
					 <tr> <td class="wd207">机身重量</td> <td>128g</td>  </tr>
					 <tr> <td class="wd207">双卡使用说明</td> <td>两张移动卡可以任意使用，任意一张卡可选 4G 网络，另一张为 GSM 网络。</td>  </tr>
					 <tr> <td class="wd207">摄像头</td> <td>1300万像素图像传感器</td>  </tr>
					 <tr> <td class="wd207">副摄像头</td> <td>500万像素</td>  </tr>
					 <tr> <td class="wd207">操作系统</td> <td>360OS</td>  </tr>
					 <tr> <td class="wd207">电池容量</td> <td>2500mAh</td>  </tr>
					 <tr> <td class="wd207">电池类型</td> <td>锂电池</td>  </tr>
					 <tr> <td class="wd207">CPU频率</td> <td>ARM® cortex®-A53™ 1.3GHz*8</td>  </tr>
					 <tr> <td class="wd207">CPU型号</td> <td>MT 6753</td>  </tr>
					 <tr> <td class="wd207">Wi-Fi</td> <td>802.11 a/b/g/n，支持5GHz和2.4GHz频段</td>  </tr>
					 <tr> <td class="wd207">网络制式</td> <td>移动4G，移动3G，移动/联通2G</td>  </tr>
					 <tr> <td class="wd207">最大存储扩展</td> <td>128GB存储扩展</td>  </tr>
					 <tr> <td class="wd207">机身内存</td> <td>16GB ROM</td>  </tr>
					 <tr> <td class="wd207">运行内存</td> <td>2GB RAM</td>  </tr>
					 <tr> <td class="wd207">存储卡类型</td> <td>MicroSD(TF)</td>  </tr>
					 <tr> <td class="wd207">分辨率</td> <td>1280x720</td>  </tr>
					 <tr> <td class="wd207">屏幕尺寸</td> <td>5.0 英寸</td>  </tr>
					 <tr> <td class="wd207">重力感应</td> <td>是</td>  </tr>
					 <tr> <td class="wd207">光线传感器</td> <td>是</td>  </tr>
					 <tr> <td class="wd207">陀螺仪</td> <td>是</td>  </tr>
					 <tr> <td class="wd207">质保期</td> <td>一年</td>  </tr>
					 <tr> <td class="wd207">售后服务</td> <td>全国联保</td>  </tr>
					 <tr> <td class="wd207">包装清单</td> <td>手机*1，电源适配器*1，USB 数据线*1，SIM 卡顶针*1，手机保修证书*1，说明书*1</td>  </tr>
				 </tbody>
			 </table>
			 </div>
	</div>

	<div id="ggcs">
		<div class="ggcs">
            <a name="c3"><span>常见问题</span></a>
		</div>
	</div>
	<div id="trouble">
		<img src="./Public/Home/images/trouble.png" alt="">

	</div>

<br>
		<div id="footer">
	         <div class="ft">
	         		<br>
	         		<br>
	         		<br>
	              <p>360商城©2013-2016 360公司版权所有 京ICP备08010314号-43 京公网安备11000002000006号奇酷互联网络科技（深圳）有限公司 0755-61898999 深圳市南山区学苑大道1001号南山智园A2栋</p>
	         </div>
        </div>
</body>
</html>